<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css 3D翻书效果</title>

    <style>
        /* remember to use - transform-style: preserve-3d; */
        html,body {
            height:100%;
            overflow: hidden;
        }
        body {
            background: -webkit-radial-gradient(#E4CEA6, #9C8763);
            background: radial-gradient(#E4CEA6, #9C8763);
            -webkit-perspective: 900px;
            perspective: 900px;
            margin: 0;
        }
        #flip {
            -webkit-animation: wrapper 6s ease-in-out infinite;
            animation: wrapper 6s ease-in-out infinite;
            height: 350px;
            width: 253px;
            position: absolute;
            left: 50%;
            top: 30%;
            -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
        }
        @-webkit-keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
            }
        }
        @keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
            }
        }
        #flip div {
            height: 350px;
            width: 24px;
            position: absolute;
            left: calc(100% - 1px);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            background-size: 253px 350px;
        }
        #flip #front,
        #flip #front div {
            background-image: url(images/Hobbit1.jpg);
            box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
        }
        #flip #front > div > div > div > div > div > div > div > div > div > div {
            box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
        }
        #flip #back { -webkit-transform: rotateY(.4deg); transform: rotateY(.4deg); -webkit-transform-origin: -100% 0; transform-origin: -100% 0; } /* avoid pages overlap */
        #flip #back,
        #flip #back div {
            background-image: url(images/map1_.jpg);
        }

        #flip > div {  left: 0;  background-position-x: 0; }
        #flip div > div { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
        #flip div > div > div { background-position-x : -46px; }
        #flip div > div > div > div { background-position-x : -69px; }
        #flip div > div > div > div > div { background-position-x : -92px; }
        #flip div > div > div > div > div > div { background-position-x : -115px; }
        #flip div > div > div > div > div > div > div { background-position-x : -138px; }
        #flip div > div > div > div > div > div > div > div  { background-position-x : -161px; }
        #flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
        #flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
        #flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
        /* the more pieces you have, the smoother the bend is */

        @-webkit-keyframes page {
            15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
            50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
            65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
            100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
        }

        @keyframes page {
            15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
            50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
            65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
            100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
        }

        #book {
            width: 248px;
            height: 350px;
            position: absolute;
            left:50%;
            top: 30%;
            -webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
            transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 0 0 0;
        }
        @-webkit-keyframes book {
            25% {
                box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
            }
            50% {
                box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
            }
            100% {
                box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
            }
        }
        @keyframes book {
            25% {
                box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
            }
            50% {
                box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
            }
            100% {
                box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
            }
        }
        #book #top {
            -webkit-animation: book 6s ease-in-out infinite;
            animation: book 6s ease-in-out infinite;
            background: url(images/map2.jpg);
            background-size: 100% 100%;
            background-position: 100%;
            box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
            height: 350px;
            width: 248px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #book #bottom {
            background: #E7DED1;
            box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
            #35582C 1px 1px 0px 0px;
            height: 350px;
            width: 253px;
            position: absolute;
            -webkit-transform: translateZ(-40px);
            transform: translateZ(-40px);
            left: 0;
            top: 0;
        }
        #book #shadow {
            -webkit-animation: shadow 6s ease-in-out infinite;
            animation: shadow 6s ease-in-out infinite;
            box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            height: 350px;
            width: 248px;
            position: absolute;
            left: -100%;
            top: 0;
            -webkit-transform: translateZ(-40px);
            transform: translateZ(-40px);
        }
        @-webkit-keyframes shadow {
            20% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
            50% {
                box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
            }
            60% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
        }
        @keyframes shadow {
            20% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
            50% {
                box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
            }
            60% {
                box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
            }
        }
        #book #front {
            background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
            background-size: 100% 2px;
            box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
            height: 40px;
            width: 251px;
            left: -3px;
            position: absolute;
            bottom: -40px;
            -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        #book #right {
            background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
            background-size: 2px 100%;
            box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
            height: 100%;
            width: 40px;
            position: absolute;
            right: -40px;
            top: 0;
            -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        h4 {
            position: absolute;
            bottom: 20px;
            left: 20px;
            margin: 0;
            font-weight: 200;
            opacity: 1;
            font-family: sans-serif;
            color: rgba(0,0,0,0.3);
        }

        /* bookmark */

        #bookmark {
            position: absolute;
            -webkit-transform: translate3d(20px,350px,-16px);
            transform: translate3d(20px,350px,-16px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        #bookmark div {
            background: rgb(151, 88, 88);
            box-shadow: rgb(133,77,77) 1px 0;
            height: 10px;
            width: 20px;
            position: absolute;
            top: 9px;
            -webkit-transform: rotateX(-14deg);
            transform: rotateX(-14deg);
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        #bookmark > div > div {
            background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
            background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
        }
        #bookmark > div > div > div {
            background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
            background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
        }
        #bookmark > div > div > div > div {
            background: none;
            border-top: 0px solid transparent;
            border-right: 10px solid rgb(133, 77, 77);
            border-bottom: 10px solid transparent;
            border-left: 10px solid rgb(133, 77, 77);
            height: 0;
            width: 0;
        }
        #bookmark-shadow {
            background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
            background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
            height: 15px;
            width: 20px;
            position: absolute;
            -webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
            transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }</style>
</head>
<body>
<!-- Please heart it if you like! -->
<div id='book'>
    <div id='top'></div>
    <div id='front'></div>
    <div id='right'></div>
    <div id='bottom'></div>
    <div id='shadow'></div>
    <div id='bookmark'>
        <div>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id='bookmark-shadow'></div>
</div>
<div id='flip'>
    <div id='front'>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id='back'>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<h4>CSS 3D Bending Effect - Page Flip</h4>

</body>
</html>
